<template>
    <div>
      <div>
        <el-button type="primary" @click="clickadduploadurl" size="small">添加上传zip地址</el-button>
        <el-dialog title="添加用户" :visible.sync="createnewzipytpeflag">
          <el-form ref="form" :model="newziptype" label-width="80px">
            <el-form-item label="名称">

              <el-input v-model="newziptype.name"></el-input>
            </el-form-item>
            <el-form-item label="发送地址">
              <el-input v-model="newziptype.url"></el-input>
            </el-form-item>



          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="createnewzipytpeflag = false">取 消</el-button>
            <el-button type="primary" @click="addUploadurl">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <div><ol> <li v-for="(item,index) in ziptypes">{{item.id}} :::: {{item.name}} ::::: {{item.url}}</li> </ol></div>

      <hr>

      <div>

        zip包： <el-select v-model="ziptypeselect" placeholder="请选择压缩包" size="medium" @change="setziptype"   >
        <el-option
          v-for="(item,index) in ziptypes"
          :key="item.id"
          :label="item.name"
          :value="index">
        </el-option>
      </el-select>

        <el-upload
          class="upload-demo"
          :action="uploadURL"
         :before-upload = "beforeupload"

          :data="uploadData"
          :on-success="onsuccess"
          multiple
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
        </el-upload>
      </div>


      <div><ol> <li v-for="(item,index) in zipdtolist">{{item.id}} :::: {{item.name}} ::::: {{item.type}}</li> </ol></div>




      <pre class="prealign">{{tablesearch}}</pre>




    </div>
</template>

<script>
  import { getziptypes ,saveziptype,uploadzip,getZipList}  from '../../api/shuiyoustools'

    export default {
        name: "config",
      data(){
          return{







            tablesearch:'1.asfddfdfdfdf\n 2.dfdfdfdfd\n 3dfsfsfdsf\n',

            createnewzipytpeflag : false,
            newziptype:{
              name:'',
              url:''
            },
            ziptypes : [],
            uploadURL:'',
            uploadData:{type:1},
            ziptypeselect: -1,
            zipdtolist:[],

          }
      },
      methods:{

        beforeupload(){
          console.log("beforeupload")
          console.log(0 == '')
          if (this.ziptypeselect == -1){

            console.log("beforeupload")
            this.$notify({
              title: '提示',
              message: '请先选择zip包对应的接口地址',

            });
            return false;
          }

        },

        submit(e){
          console.log(e)

          this.$notify({
            title: '提示',
            message: '这是一条不会自动关闭的消息',
            duration: 0
          });


        },
        /**
         * 获取上传文件子文件名
         */
        onsuccess(rep){
          this.ziptypeselect = -1
          this.$notify({
            title: '提示',
            message: rep,

          });

        },
        getUploadUrl(){
          console.log("getuploadurl")
          //this.downloadURL = downloadzip()
          this.uploadURL = uploadzip()
          //return 'https://jsonplaceholder.typicode.com/posts/'
        },

        setziptype(index){
          this.uploadData.type = this.ziptypes[index].id
        },


        clickadduploadurl(){
          this.createnewzipytpeflag = true
        },
        addUploadurl(){
         // console.log(this.newziptype)
          saveziptype(this.newziptype)
            .then(res=>{
              this.ziptypes = res.data
              this.createnewzipytpeflag = false
            }).catch(err=>{
            this.$alert(err.data, 'error')
          })
        },
        getziptypesall(){
          getziptypes()
            .then(res=>{
              this.ziptypes = res.data
            })
        },
        getzipdotlist(){
          getZipList()
            .then(res=>{
              this.zipdtolist = res.data
            })
        },

      },
      mounted(){
        this.getUploadUrl()
        this.getziptypesall()
        this.getzipdotlist()
      },
    }
</script>

<style scoped>

  .setinput >>> .el-input {


    position: relative;

    font-size: 14px;

    display: inline-block;

    width: 50%;

  }

  .prealign {


    text-align:justify;   //文本完全两端对齐。
  text-justify:inter-ideograph; //ie hack 为表意字文本提供完全两端对齐。
  word-wrap:break-word;
    word-break:break-all;
  }


</style>
